<template>
  <div class="panel_wrap" >
    <!-- 操作面板工具栏 -->
    <div class="toolbar_wrap" >

    </div>
    <div class="panel_content" >
      <grid-layout
        :layout.sync="layout"
        :col-num="12"
        :row-height="30"
        :is-draggable="true"
        :is-resizable="true"
        :is-mirrored="false"
        :vertical-compact="true"
        :margin="[10, 10]"
        :use-css-transforms="true"
        class="grid_class"
      >

        <grid-item v-for="item in layout"
                   :x="item.x"
                   :y="item.y"
                   :w="item.w"
                   :h="item.h"
                   :i="item.i"
                   :key="item.i"
                   class="grid_item"
                   @resized="resizedEvent"
        >
          <!-- 折线图 -->
          <line-chart @click="handleClick" :id="item.i" :ref="item.i" />
        </grid-item>
      </grid-layout>
    </div>
  </div>
</template>
<style scoped lang="less">
@import "index";
</style>
<script>
import VueGridLayout from 'vue-grid-layout';
export default {
  data() {
    return {
      layout: [
        {"x":0,"y":0,"w":2,"h":6,"i":"0"},
        // {"x":2,"y":0,"w":2,"h":4,"i":"1"},
        // {"x":4,"y":0,"w":2,"h":5,"i":"2"},
        // {"x":6,"y":0,"w":2,"h":3,"i":"3"},
      ],
    }
  },
  components: {
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem
  },
  methods: {
    resizedEvent(i, newH, newW, newHPx, newWPx) {
      console.log(i, newH, newW, newHPx, newWPx)
      this.$refs[i][0].init()
    },
    handleClick() {
      console.log('111')
    }
  },
  mounted() {
    console.log(VueGridLayout)
  }
}
</script>
